<template>
    <mian-layout>
        <el-descriptions class="ydv" labelClassName="mysdItemLable" title="订单基本信息" :column="2" border>
            <el-descriptions-item label="订单编号">{{oDetail.orderNo}}</el-descriptions-item>
            <el-descriptions-item label="商品名称">{{oDetail.goodsName}}</el-descriptions-item>
            <el-descriptions-item label="买方">{{oDetail.buyerPhone}}</el-descriptions-item>
            <el-descriptions-item label="卖方">{{oDetail.shopName}}</el-descriptions-item>
            <el-descriptions-item label="购买数量">{{oDetail.quantity}}</el-descriptions-item>
            <el-descriptions-item v-if="oDetail.internalPrice" label="会员价">
                {{oDetail.internalPrice.decimalTwoString}}
            </el-descriptions-item>
            <el-descriptions-item v-if="oDetail.totalAmount" label="买方实际付款金额">
                {{oDetail.totalAmount.decimalTwoString}}
            </el-descriptions-item>
            <el-descriptions-item v-if="oDetail.totalAmount" label="卖方实际收款金额">
                {{(oDetail.totalAmount.num-oDetail.payChargeAmount.num).toFixed(2)}}
            </el-descriptions-item>
            <el-descriptions-item v-if="oDetail.payChargeAmount" label="交易服务费">
                {{oDetail.payChargeAmount.decimalTwoString}}
            </el-descriptions-item>
            <el-descriptions-item label="订单类型">
                {{oDetail.logisticsType==1 ? '送货' :'自提'}}
            </el-descriptions-item>
            

            <el-descriptions-item label="状态" v-if="oDetail.orderStatus">
                <span style="padding-right:20px">
                    <template v-if="oDetail.orderStatus == 10">待付款</template>
                    <template v-else-if="oDetail.orderStatus == 20">待发货</template>
                    <template v-else-if="oDetail.orderStatus == 30">已发货</template>
                    <template v-else-if="oDetail.orderStatus == 50">交易成功</template>
                    <template v-else-if="oDetail.orderStatus == 60">待退货</template>
                    <template v-else-if="oDetail.orderStatus== 70">待退款</template>
                    <template v-else-if="oDetail.orderStatus == 80">已退款成功</template>
                    <template v-else-if="oDetail.orderStatus == 90">已取消</template>
                </span>
                
                <!---订单状态,10:待付款,20:待发货,30:已发货,50:交易成功,60:待退货,70:待退款,80:已退款成功,90:已取消-->
                <template v-if="oDetail.orderStatus == 20"><!--已付款--->
                    <el-button type="warning" size="mini" @click="refundApply">退货</el-button>
                    <el-button type="primary" size="mini" @click="dialogVisible2=true">出库发货</el-button>
                </template>
                <template v-if="oDetail.orderStatus == 30"><!-- 已发货 -->
                    <!-- <el-button type="warning" size="mini" @click="refundApply">退货</el-button> -->
                    <el-button type="success" size="mini" @click="complete">交易成功</el-button>
                </template>
                <!-- <template v-if="oDetail.orderStatus == 50">
                    <el-button type="warning" size="mini" @click="refundApply">退货</el-button>
                </template> -->
                <!-- <template v-if="oDetail.orderStatus.code == 20">待发货</template>-->

                
                
                
            </el-descriptions-item>
        </el-descriptions>
        <br/>
        <el-descriptions class="ydv" labelClassName="mysdItemLable" title="收货信息" :column="2" border>
            <el-descriptions-item label="收货人姓名">{{oDetail.shippingName}}</el-descriptions-item>
            <el-descriptions-item label="联系方式">{{oDetail.shippingPhone}}</el-descriptions-item>
            <el-descriptions-item label="收货人地址" :span="2">{{oDetail.shippingAddress}}</el-descriptions-item>
        </el-descriptions>

        <br/>
        <div style="text-align: center;">
            <my-back type="info" :reGetDataFlag="true">返回</my-back>
        </div>

        <!-- <my-dialog v-if="dialogVisible" :show.sync="dialogVisible" :showBtn="false" width="500px" title="退货">
            <el-form size="small" label-width="70px" class="demo-ruleForm">
                <el-form-item label="退货原因" prop="name">
                    <el-input type="textarea" v-model="reason" :autosize="{ minRows: 10, maxRows: 10}" placeholder="请输入退货原因"></el-input>
                </el-form-item>  
            </el-form> 
            <div style="text-align: right">
                <el-button  size="small" @click="dialogVisible=false" icon="el-icon-close">取 消</el-button>
                <el-button type="primary" size="small" icon="el-icon-check" @click="saveRefundApply">确 定</el-button>
            </div>
        </my-dialog>  -->

        <my-dialog v-if="dialogVisible2" :show.sync="dialogVisible2" :showBtn="false" width="500px" title="物流信息">
            <el-form size="small" label-width="70px" class="demo-ruleForm">
                <el-form-item label="物流公司" prop="trackingCompany">
                    <el-input v-model="wl.trackingCompany"></el-input>
                </el-form-item>
                <el-form-item label="物流单号" prop="trackingNumber">
                    <el-input v-model="wl.trackingNumber"></el-input>
                </el-form-item>  
            </el-form> 
            <div style="text-align: right">
                <el-button  size="small" @click="dialogVisible2=false" icon="el-icon-close">取 消</el-button>
                <el-button type="primary" size="small" icon="el-icon-check" @click="saveLogistics">确 定</el-button>
            </div>
        </my-dialog>
    </mian-layout>
</template>
<script>
import {mapGetters} from "vuex"
import myTable from '@/components/public/myTable';
import myBack from '@/components/public/myBack.vue'
import myDialog from '@/components/public/myDialog';
import {
  get_order_detail,
  refund_apply,
  confirm_receiving,
  send_goods
} from '@/api/arApi'
export default {
    components:{
      myTable,
      myBack,
      myDialog
    },
    data(){
        return{
            orderId:'',
            oDetail:{},
            dialogVisible:false,
            reason:'',
            dialogVisible2:false,
            wl:{
                trackingCompany: "",
                trackingNumber: ""
            }
        }
    },
    computed:{
        ...mapGetters({
            'userInfo':'user/userInfo'
        })
    },
    created(){
        this.orderId = this.$route.params.id
        this.getData()
    },
    methods:{
        getData(){ 
            get_order_detail(this.orderId).then(res=>{
                this.oDetail = res.data
            })
        },
        refundApply(){
            //this.dialogVisible = true
            this.$confirm('请确认是否退货,退货需用户承担GAS成本?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                const res = await refund_apply({orderNo:this.oDetail.orderNo})
                if(res.success){
                    this.$message.success('操作成功！')
                    this.getData()
                }
            }).catch(() => {});
        },
        // saveRefundApply(){
        //     refund_apply({
        //         orderId:this.orderId,
        //         refundReason:this.reason
        //     }).then(res=>{
        //         if(res.success){
        //             this.$message.success('退货成功！')
        //             this.dialogVisible = false
        //             this.getData()
        //         }
        //     })
        // },
        complete(){
            this.$confirm('确定完成?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                const res = await confirm_receiving({orderNo:this.oDetail.orderNo})
                if(res.success){
                    this.$message.success('操作成功！')
                    this.getData()
                }
            }).catch(() => {});
        },
        async saveLogistics(){
            if(!this.wl.trackingCompany){
                return this.$message.warning('请填写物流公司')
            }else if(!this.wl.trackingNumber){
                return this.$message.warning('请填写物流单号')
            }
            const res = await send_goods({
                orderNo:this.oDetail.orderNo,
                ...this.wl
            })
            if(res.success){
                this.dialogVisible2 = false
                this.$message.success('操作成功！')
                this.getData()
            }
        }
    }
}
</script>
<style lang="scss">
    .mysdItemLable{
        width: 150px;
    }
    .ydv .is-bordered{
        table-layout:fixed!important
    }
</style>